<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.css" />
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>
    <style>
      .warnInput {
        border-color: #ff0000;
        border-style: solid;
      }

      .nav flex-column {
        width: 165px;
        position: absolute;
        top: 110px;
        bottom: 0px;
      }

      .web-right {
        position: absolute;
        left: 165px;
        top: 110px;
        bottom: 0px;
        right: 0;
      }
    </style>
  </head>

  <body style="background-color: #e3f8ff">
    <nav class="navbar navbar-expand-lg navbar-light bg-light navBack">
      <a class="navbar-brand" href="#">
        <img class="navLogo d-inline-block align-top" />
        <label style="text-align: center; color: white; margin-left: 20px">
          <label style="margin: 0; font-size: 30px; font-weight: 700"
            >无创产前数据分析管理系统</label
          ><br />
          <label style="margin: 0; font-size: 17px; font-weight: 700"
            >Non-invasive Prenatal Data Analysis system</label
          >
        </label>
      </a>
      <button class="navbar-toggler" type="button" data-target="#navbarText">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <div class="mr-auto"></div>
        <div style="margin-right: 20px">
          <a href="#index">
            <img src="img/shouye.png" style="width: 50px; margin-left: 30px" />
          </a>
          <a>
            <img src="img/xiaoxi.png" style="width: 50px; margin-left: 30px" />
          </a>
          <a href="#quit" data-toggle="modal" data-target="#quit">
            <img src="img/tuichu.png" style="width: 40px; margin-left: 30px" />
          </a>
        </div>
      </div>
    </nav>

    <ul class="nav flex-column" style="width: 165px">
      <ul class="menuul" style="width: 165px">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao01.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao02.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao03.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao04.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao05.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao06.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao07.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao08.png" /></span>欢迎您</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span><img src="img/tubiao09.png" /></span>欢迎您</a>
        </li>
      </ul>
    </ul>

    <div class="web-right">
      <iframe
        id="iframemain"
        name="mainRight"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="auto"
        src="jexcelDemo.html"
        style="
          width: 100%;
          height: 100%;
          padding-left: 10px;
          padding-right: 10px;
        "
        allowtransparency="yes"
      ></iframe>
    </div>
    <script>
      function ss() {
        $("#myModal").modal("show");
      }
      function tijiao() {
        for (let i = 0; i < find.length; i++) {
          console.log(find[i].id + ":" + find[i].css(""));
          if (find[i].css("color") == "red") {
            return false;
          }
        }
      }
      function checkAttribute(date) {
        if (date.id == "sampleReceiptStatus") {
          if ($(date).val() == 0) {
            $(date).addClass("warnInput");
          } else {
            $(date).removeClass("warnInput");
          }
        } else {
          if ($(date).val() == "") {
            $(date).addClass("warnInput");
          } else {
            $(date).removeClass("warnInput");
          }
        }
      }
    </script>
  </body>
</html>
